<script lang="ts">
import { logout, type UserInfo } from '@/api/auth/auth';
import { Component, Inject, Vue } from 'vue-facing-decorator';

@Component({})
export default class HeaderBar extends Vue {
  @Inject() userInfo: UserInfo | null | undefined;
  @Inject() updateLoginInfo!: () => Promise<void>;
  @Inject() theme!: 'light' | 'dark';
  @Inject() setTheme!: (theme: 'light' | 'dark') => void;

  menuExpanded: boolean = false;
  toggleMenu() {
    this.menuExpanded = !this.menuExpanded;
  }

  get isAdmin() {
    return ['admin', 'mod'].includes(this.userInfo?.role as string);
  }

  searchText: string = '';

  get userAvatarUrl() {
    if (!this.userInfo) return './img/avatar.png';
    return '/api/image/' + this.userInfo.avatar;
  }

  search() {
    this.$router.push('/query/novel/keyword?keyword=' + encodeURIComponent(this.searchText));
  }

  async logout() {
    await logout();
    await this.updateLoginInfo();
  }
}
</script>
<template>
  <nav :class="[menuExpanded ? 'menu-expanded' : 'menu-collapsed']">
    <div class="toggle-button">
      <el-button @click="toggleMenu">☰</el-button>
    </div>
    <div class="nav-link">
      <ul class="nav-list">
        <li><router-link to="/">最近更新</router-link></li>
        <li v-if="userInfo"><router-link to="/query/favorite">我的收藏</router-link></li>
        <li v-if="userInfo"><router-link to="/novel/create">小说创作</router-link></li>
        <li v-if="isAdmin"><router-link to="/admin/stats">管理后台</router-link></li>
      </ul>
      <div class="nav-search">
        <el-form class="search-form" inline @submit.prevent="search">
          <el-form-item>
            <el-input
              type="search"
              placeholder="搜索小说"
              class="search-input"
              v-model="searchText"
              @keyup.enter="search"
            >
              <template #prefix>
                <el-icon><el-icon-search /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="nav-end">
      <div class="nav-theme">
        <el-button :icon="theme === 'light' ? 'el-icon-sunny' : 'el-icon-moon'" @click="setTheme(theme === 'light' ? 'dark' : 'light')" />
      </div>
      <div class="nav-user" v-if="userInfo != null">
        <router-link :to="'/user/' + userInfo.id" class="user-name">
          <img class="avatar" :src="userAvatarUrl" alt="" />
          <span>{{ userInfo.name }}</span>
        </router-link>
      </div>
      <div class="nav-user" v-if="userInfo === null">
        <router-link to="/auth">登录</router-link>
      </div>
    </div>
  </nav>
</template>
<style scoped>
nav {
  display: flex;
  margin: 0 0 10px;
  padding: 10px 20px;
  height: 30px;
  gap: 0 10px;
  position: relative;
  overflow: visible;
  background-color: var(--el-bg-color-overlay);
  border-bottom: 1px solid var(--el-border-color);
  color: var(--el-text-color-primary);
  box-shadow: var(--el-box-shadow-light);
}

nav .el-form-item {
  margin: 0;
}

.wide-mode .toggle-button {
  display: none;
}

.thin-mode .nav-link {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  padding: 10px 20px;
  flex-direction: column-reverse;
  background-color: var(--el-bg-color-overlay);
  padding-bottom: 10px;
  z-index: 100;
  border-bottom: 1px solid var(--el-border-color);
}

.thin-mode .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: var(--el-box-shadow-dark);
}

.thin-mode .nav-link a {
  display: block;
}

.thin-mode ul {
  flex-direction: column;
}

.thin-mode .menu-collapsed .nav-link {
  display: none;
}

.nav-link {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 0 10px;
}

nav ul li {
  line-height: 30px;
}

nav a {
  text-decoration: none;
  color: var(--el-color-primary);
}

nav ul a:hover {
  text-decoration: underline;
}

.nav-end {
  margin-left: auto;
  line-height: 30px;
  display: flex;
  gap: 10px;
}

.avatar {
  width: 36px;
  height: 36px;
  margin: -4px 10px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid var(--el-border-color-light);
}

.search-form {
  display: flex;
  align-items: center;
}

.search-type-select {
  width: 100px;
  margin-right: 10px;
}

.search-input {
  width: 200px;
}

.thin-mode .search-input {
  width: calc(100vw - 40px);
}

.tiny-mode .search-type-select {
  width: 80px;
}
</style>
